{% extends 'base.html' %}
{% load static %}
{% load custom_filters %}

{% block title %}{{ report.name }} - EasyTesting{% endblock %}

{% block header %}测试报告: {{ report.name }}{% endblock %}

{% block header_buttons %}
    <div class="btn-group">
        <a href="{% url 'test_report_list' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> 返回列表
        </a>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"
                    aria-expanded="false">
                <i class="bi bi-download"></i> 导出
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" id="exportPDF"><i class="bi bi-file-earmark-pdf"></i> 导出为
                    PDF</a></li>
                <li><a class="dropdown-item" href="#" id="exportExcel"><i class="bi bi-file-earmark-excel"></i> 导出为
                    Excel</a></li>
                <li><a class="dropdown-item" href="#" id="exportJSON"><i class="bi bi-file-earmark-code"></i> 导出为
                    JSON</a></li>
            </ul>
        </div>
        <a href="{% url 'test_report_delete' report.pk %}" class="btn btn-outline-danger">
            <i class="bi bi-trash"></i> 删除
        </a>
    </div>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>报告详情</span>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h5 class="text-muted mb-2">项目</h5>
                        <p>
                            <a href="{% url 'project_detail' pk=report.project.pk %}" class="text-decoration-none">
                                {{ report.project.name }}
                            </a>
                        </p>
                    </div>

                    <div class="mb-4">
                        <h5 class="text-muted mb-2">描述</h5>
                        <p>{{ report.description|default:"无描述" }}</p>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h5 class="text-muted mb-2">报告类型</h5>
                            <span class="badge
                            {% if report.report_type == 'test_run' %}bg-primary
                            {% elif report.report_type == 'test_suite_run' %}bg-success
                            {% else %}bg-secondary{% endif %}">
                            {% if report.report_type == 'test_run' %}单个测试用例
                            {% elif report.report_type == 'test_suite_run' %}测试套件
                            {% else %}自定义{% endif %}
                        </span>
                        </div>

                        <div class="col-md-6 mb-3">
                            <h5 class="text-muted mb-2">报告格式</h5>
                            <span class="badge bg-info">{{ report.report_format|upper }}</span>
                        </div>

                        <div class="col-md-6">
                            <h5 class="text-muted mb-2">创建时间</h5>
                            <p class="mb-0">{{ report.created_at|date:"Y-m-d H:i" }}</p>
                        </div>

                        <div class="col-md-6">
                            <h5 class="text-muted mb-2">最后更新</h5>
                            <p class="mb-0">{{ report.updated_at|date:"Y-m-d H:i" }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>报告内容</span>
                    <div>
                        <button id="copyReportBtn" class="btn btn-sm btn-outline-secondary" title="复制内容">
                            <i class="bi bi-clipboard"></i>
                        </button>
                        <button id="expandReportBtn" class="btn btn-sm btn-outline-secondary ms-1" title="全屏查看">
                            <i class="bi bi-arrows-fullscreen"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0" id="reportContentBody">
                    {% if report.report_format == 'html' %}
                        <div class="report-html-container">
                            {% if 'Single run:' in report_content %}
                                <div class="test-report-container">
                                    {% with content=report_content|safe %}
                                        <div class="test-report-header">
                                            <h2 class="test-report-title">{{ content|extract_title }}</h2>

                                            <div class="test-report-info">
                                                <div class="test-info-grid">
                                                    <div class="test-info-item">
                                                        <div class="info-label">项目:</div>
                                                        <div class="info-value">{{ report.project.name }}</div>
                                                    </div>
                                                    <div class="test-info-item">
                                                        <div class="info-label">环境:</div>
                                                        <div class="info-value">{{ content|extract_environment }}</div>
                                                    </div>
                                                    <div class="test-info-item">
                                                        <div class="info-label">状态:</div>
                                                        <div class="info-value">
                                                        <span class="status-badge status-{{ content|extract_status|lower }}">
                                                            {{ content|extract_status }}
                                                        </span>
                                                        </div>
                                                    </div>
                                                    <div class="test-info-item">
                                                        <div class="info-label">开始时间:</div>
                                                        <div class="info-value">{{ content|extract_start_time }}</div>
                                                    </div>
                                                    <div class="test-info-item">
                                                        <div class="info-label">结束时间:</div>
                                                        <div class="info-value">{{ content|extract_end_time }}</div>
                                                    </div>
                                                    <div class="test-info-item">
                                                        <div class="info-label">持续时间:</div>
                                                        <div class="info-value">{{ content|extract_duration }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="test-report-results">
                                            <h3 class="section-title">测试结果</h3>

                                            <div class="test-case-details">
                                                <div class="test-case-header">
                                                    <h4 class="test-case-name">{{ content|extract_test_name }}</h4>
                                                    <span class="status-badge status-{{ content|extract_test_status|lower }}">
                                                    {{ content|extract_test_status }}
                                                </span>
                                                </div>

                                                <div class="test-case-info">
                                                    <div class="info-row">
                                                        <div class="info-label">请求方法:</div>
                                                        <div class="info-value">{{ content|extract_request_method }}</div>
                                                    </div>
                                                    <div class="info-row">
                                                        <div class="info-label">请求URL:</div>
                                                        <div class="info-value url-value">{{ content|extract_request_url }}</div>
                                                    </div>

                                                    {% if content|extract_request_headers %}
                                                        <div class="collapsible-section">
                                                            <div class="collapsible-header"
                                                                 onclick="toggleCollapsible(this)">
                                                                <span class="section-label">请求头</span>
                                                                <i class="bi bi-chevron-down"></i>
                                                            </div>
                                                            <div class="collapsible-content">
                                                                <pre class="code-block">{{ content|extract_request_headers }}</pre>
                                                            </div>
                                                        </div>
                                                    {% endif %}

                                                    {% if content|extract_request_body %}
                                                        <div class="collapsible-section">
                                                            <div class="collapsible-header"
                                                                 onclick="toggleCollapsible(this)">
                                                                <span class="section-label">请求体</span>
                                                                <i class="bi bi-chevron-down"></i>
                                                            </div>
                                                            <div class="collapsible-content">
                                                                <pre class="code-block">{{ content|extract_request_body }}</pre>
                                                            </div>
                                                        </div>
                                                    {% endif %}

                                                    {% if content|extract_response_headers %}
                                                        <div class="collapsible-section">
                                                            <div class="collapsible-header"
                                                                 onclick="toggleCollapsible(this)">
                                                                <span class="section-label">响应头</span>
                                                                <i class="bi bi-chevron-down"></i>
                                                            </div>
                                                            <div class="collapsible-content">
                                                                <pre class="code-block">{{ content|extract_response_headers }}</pre>
                                                            </div>
                                                        </div>
                                                    {% endif %}

                                                    {% if content|extract_response_body %}
                                                        <div class="collapsible-section">
                                                            <div class="collapsible-header"
                                                                 onclick="toggleCollapsible(this)">
                                                                <span class="section-label">响应体</span>
                                                                <i class="bi bi-chevron-down"></i>
                                                            </div>
                                                            <div class="collapsible-content">
                                                                <pre class="code-block">{{ content|extract_response_body }}</pre>
                                                            </div>
                                                        </div>
                                                    {% endif %}

                                                    {% if content|extract_error_message %}
                                                        <div class="error-section">
                                                            <div class="error-header">
                                                                <span class="error-label">错误信息</span>
                                                            </div>
                                                            <div class="error-content">
                                                                <pre class="error-message">{{ content|extract_error_message }}</pre>
                                                            </div>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endwith %}
                                </div>
                            {% else %}
                                {{ report_content|safe }}
                            {% endif %}
                        </div>
                    {% elif report.report_format == 'json' %}
                        <div class="report-json">
                            <pre class="json-content"><code
                                    class="language-json">{{ report_content|pprint }}</code></pre>
                        </div>
                    {% else %}
                        <div class="report-content">
                            <pre class="text-content"><code>{{ report_content }}</code></pre>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <style>
        /* 基础样式 */
        :root {
            --primary-color: #4a6cf7;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --warning-color: #ffc107;
            --info-color: #17a2b8;
            --secondary-color: #6c757d;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --border-color: #e9ecef;
            --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
            --shadow-md: 0 .5rem 1rem rgba(0, 0, 0, .15);
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* 测试报告容器 */
        .test-report-container {
            font-family: var(--font-family);
            color: #333;
            background-color: #fff;
            padding: 0;
        }

        /* 报告标题和头部 */
        .test-report-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            background-color: #f8f9fa;
        }

        .test-report-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1.5rem;
        }

        /* 信息网格 */
        .test-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1rem;
        }

        .test-info-item {
            display: flex;
            align-items: baseline;
        }

        .info-label {
            font-weight: 600;
            color: #555;
            min-width: 100px;
            margin-right: 0.5rem;
        }

        .info-value {
            color: #333;
        }

        /* 状态标签 */
        .status-badge {
            display: inline-block;
            padding: 0.25em 0.6em;
            font-size: 0.85em;
            font-weight: 600;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
        }

        .status-passed {
            background-color: rgba(40, 167, 69, 0.15);
            color: var(--success-color);
        }

        .status-failed {
            background-color: rgba(220, 53, 69, 0.15);
            color: var(--danger-color);
        }

        .status-error {
            background-color: rgba(255, 193, 7, 0.15);
            color: #d97706;
        }

        /* 测试结果部分 */
        .test-report-results {
            padding: 1.5rem;
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--primary-color);
            color: var(--primary-color);
        }

        /* 测试用例详情 */
        .test-case-details {
            background-color: #fff;
            border-radius: 0.375rem;
            border: 1px solid var(--border-color);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }

        .test-case-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: #f8f9fa;
            border-bottom: 1px solid var(--border-color);
        }

        .test-case-name {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
        }

        .test-case-info {
            padding: 1rem;
        }

        .info-row {
            display: flex;
            margin-bottom: 0.75rem;
            align-items: baseline;
        }

        .url-value {
            word-break: break-all;
        }

        /* 可折叠部分 */
        .collapsible-section {
            margin-bottom: 1rem;
            border: 1px solid var(--border-color);
            border-radius: 0.375rem;
            overflow: hidden;
        }

        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            background-color: #f8f9fa;
            cursor: pointer;
            user-select: none;
        }

        .section-label {
            font-weight: 600;
            color: #555;
        }

        .collapsible-content {
            display: none;
            padding: 0;
            background-color: #fff;
            border-top: 1px solid var(--border-color);
        }

        /* 代码块 */
        .code-block {
            margin: 0;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 0;
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875rem;
            color: #333;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 300px;
            overflow-y: auto;
        }

        /* 错误部分 */
        .error-section {
            margin-top: 1rem;
            border: 1px solid var(--danger-color);
            border-radius: 0.375rem;
            overflow: hidden;
        }

        .error-header {
            padding: 0.75rem 1rem;
            background-color: rgba(220, 53, 69, 0.15);
        }

        .error-label {
            font-weight: 600;
            color: var(--danger-color);
        }

        .error-content {
            padding: 0;
        }

        .error-message {
            margin: 0;
            padding: 1rem;
            background-color: #fff;
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875rem;
            color: var(--danger-color);
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        /* JSON 和文本内容 */
        .report-json, .report-content {
            padding: 0;
        }

        .json-content, .text-content {
            margin: 0;
            padding: 1.5rem;
            background-color: #f8f9fa;
            border-radius: 0;
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875rem;
            color: #333;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 600px;
            overflow-y: auto;
        }

        /* 滚动条美化 */
        .code-block::-webkit-scrollbar,
        .json-content::-webkit-scrollbar,
        .text-content::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .code-block::-webkit-scrollbar-track,
        .json-content::-webkit-scrollbar-track,
        .text-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .code-block::-webkit-scrollbar-thumb,
        .json-content::-webkit-scrollbar-thumb,
        .text-content::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }

        .code-block::-webkit-scrollbar-thumb:hover,
        .json-content::-webkit-scrollbar-thumb:hover,
        .text-content::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .test-info-grid {
                grid-template-columns: 1fr;
            }

            .info-row {
                flex-direction: column;
            }

            .info-label {
                margin-bottom: 0.25rem;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化代码高亮
            if (typeof hljs !== 'undefined') {
                document.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightElement(block);
                });
            }

            // 复制报告内容
            const copyReportBtn = document.getElementById('copyReportBtn');
            if (copyReportBtn) {
                copyReportBtn.addEventListener('click', function () {
                    const reportContent = document.querySelector('.report-json pre') ||
                        document.querySelector('.test-report-container') ||
                        document.querySelector('.report-content pre');

                    if (reportContent) {
                        const textToCopy = reportContent.innerText || reportContent.textContent;
                        navigator.clipboard.writeText(textToCopy).then(() => {
                            // 显示复制成功提示
                            const originalIcon = copyReportBtn.querySelector('i').className;
                            copyReportBtn.querySelector('i').className = 'bi bi-check-lg';

                            setTimeout(() => {
                                copyReportBtn.querySelector('i').className = originalIcon;
                            }, 2000);
                        }).catch(err => {
                            console.error('无法复制内容: ', err);
                        });
                    }
                });
            }

            // 全屏查看报告
            const expandReportBtn = document.getElementById('expandReportBtn');
            const reportContentBody = document.getElementById('reportContentBody');

            if (expandReportBtn && reportContentBody) {
                expandReportBtn.addEventListener('click', function () {
                    if (!document.querySelector('.report-fullscreen')) {
                        // 创建全屏容器
                        const fullscreenContainer = document.createElement('div');
                        fullscreenContainer.className = 'report-fullscreen';

                        // 创建全屏头部
                        const fullscreenHeader = document.createElement('div');
                        fullscreenHeader.className = 'report-fullscreen-header';

                        // 创建标题
                        const title = document.createElement('h2');
                        title.textContent = '{{ report.name }}';

                        // 创建关闭按钮
                        const closeBtn = document.createElement('button');
                        closeBtn.className = 'btn btn-outline-secondary';
                        closeBtn.innerHTML = '<i class="bi bi-x-lg"></i>';
                        closeBtn.addEventListener('click', function () {
                            document.body.removeChild(fullscreenContainer);
                            document.body.style.overflow = 'auto';
                        });

                        // 组装全屏头部
                        fullscreenHeader.appendChild(title);
                        fullscreenHeader.appendChild(closeBtn);

                        // 复制报告内容
                        const contentClone = reportContentBody.cloneNode(true);

                        // 组装全屏容器
                        fullscreenContainer.appendChild(fullscreenHeader);
                        fullscreenContainer.appendChild(contentClone);

                        // 添加到body
                        document.body.appendChild(fullscreenContainer);
                        document.body.style.overflow = 'hidden';
                    } else {
                        // 退出全屏
                        const fullscreenContainer = document.querySelector('.report-fullscreen');
                        document.body.removeChild(fullscreenContainer);
                        document.body.style.overflow = 'auto';
                    }
                });
            }

            // 导出功能
            document.getElementById('exportPDF')?.addEventListener('click', function (e) {
                e.preventDefault();
                alert('PDF导出功能即将上线');
            });

            document.getElementById('exportExcel')?.addEventListener('click', function (e) {
                e.preventDefault();
                alert('Excel导出功能即将上线');
            });

            document.getElementById('exportJSON')?.addEventListener('click', function (e) {
                e.preventDefault();
                alert('JSON导出功能即将上线');
            });
        });

        // 折叠/展开功能
        function toggleCollapsible(element) {
            const content = element.nextElementSibling;
            const icon = element.querySelector('i');

            if (content.style.display === 'block') {
                content.style.display = 'none';
                icon.className = 'bi bi-chevron-down';
            } else {
                content.style.display = 'block';
                icon.className = 'bi bi-chevron-up';
            }
        }
    </script>
{% endblock %}
